<template>
    <div>
        <!-- top区域 -->
        <el-row>
            <el-col :span="5">
               <div class="grid-content bg-purple-dark">
                    <img src="../../assets/img/logo.png" style="margin-top:10px;margin-left:8px;width:250px;height:30px">
               </div>
            </el-col>
            <el-col :span="14"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple-dark">
                    <el-row>
                        <el-col :span="4">
                            <img src="../../assets/img/logo1.png" style="width:30px;height:30px;margin-top:10px">
                        </el-col>
                        <el-col :span="16">
                            <p style="margin-top:10px;color:rgba(5, 160, 69, 1);font-size:10px"> 联系电话<br><b style="font-size:12px;color:#333">010-8888-6666</b></p>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>

        <!-- 导航栏区域 -->
        <el-row>
           <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="16">
                <el-menu
                    @open="handleOpen" 
                    @close="handleClose"
                    :default-active="activePath"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#05a045"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    router
                    >
                    <el-menu-item :index="item.path" v-for="item in menulist"
                     :key="item.id" style="margin:0px 25px" @click="saveNavState(item.path)">{{item.authName}}</el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        </el-row>

    </div>
</template>

<script>
export default {
    data(){
        return{
            menulist:[
                {id:0,authName:"首页",path:"/index"},
                {id:1,authName:"主要业务",path:"/primary"},
                {id:2,authName:"关于我们",path:"/about"},
                {id:3,authName:"行业资讯",path:"/message"},
                {id:4,authName:"新闻中心",path:"/news"},
                {id:5,authName:"联系我们",path:"/connact"},
            ],
            activePath:'',
            
        }
    },
    methods:{
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        // 
         saveNavState(activePath){
            window.sessionStorage.setItem('activePath',activePath)
             this.activePath = activePath
        },
         handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },
    created(){
        this.activePath = window.sessionStorage.getItem('activePath')
       
    }
}
</script>

<style scoped>
  .bg-purple-dark {
    background:#fff;
    
  }
  .grid-content {
    min-height: 49px;
    padding-bottom:1px ;
    outline: 0;
  }

  /*  */
  .bg-purple {
    background: #05a045;
  }
  .bg-purple-light {
    background: #fff;
  }
  /*  */
  .el-menu {
      height: 50px;
  }
.el-menu--horizontal>.el-menu-item{
      height: 50px;
      line-height: 50px;
  }

.el-menu--horizontal>.el-menu-item.is-active{
      border-bottom:none;
      color: #fff;
}
.el-menu-item.el-menu-item.is-active{
    background:#eca527 !important;
    color: #fff !important;
}
</style>